<template>
  <div id="dash-board-box" class="dash-board-wraper">
    <div>自定义内容</div>
    <!-- 仪表盘tool-bar -->
    <div
      class="panel-tool-bar"
      :style="{
        // modify by 王一飞 2024/4/26 全屏状态兼容
        paddingBottom: isFullScreen ? '0px' : '9px',
        height: isFullScreen ? '48px' : '39px'
      }"
      v-if="defaultDashBoard && defaultDashBoard.oid"
    >
      <panel-toolbar-left
        ref="panelToolbarLeftRef"
        @onDashBoardChange="onDashBoardChange"
        @onNotEdit="commondsMap.cancle"
        :isEdit="isEdit"
        v-model="defaultDashBoard"
        :userRight="userRight"
      />
      <div class="panel-toolbar-right" v-if="buttonConfigs.length">
        <component
          v-for="button in buttonConfigs"
          :is="getComponent(button.type)"
          :key="button.command"
          :style="button.style || ''"
          :options="button.options"
          @click="doCommond(button.command)"
          @command="val => doCommond(button.command, val)"
          @change="val => doCommond(button.command, val)"
        >
          <template #dropdownItem="{ data }">
            <div style="display: flex; align-items: center; width: 80px">
              <em :class="data.icon" style="margin-right: 9px"></em>
              <div>{{ data.label }}</div>
            </div>
          </template>
        </component>
      </div>
    </div>
    <!-- 仪表盘内容 -->
    <div
      class="dash-board-content"
      :style="{
        height: defaultDashBoard && defaultDashBoard.oid ? `calc(100% - ${isFullScreen ? '48px' : '39px'})` : '100%'
      }"
    >
      <drag-dash-board
        ref="dragBashBoardRef"
        :dashBoardInfo="defaultDashBoard"
        :isEdit="isEdit"
        :userRight="userRight"
        :isParentFullScreen="isFullScreen"
        @toAddCard="toAddCard"
        @toAddDashBoard="handleDashBoard('1')"
        @getDashBoardDetail="getDashBoardDetail"
      />
    </div>
    <!-- 添加卡片 -->
    <ty-plm-dialog v-model="dialogVisible" :options="addCardDialogOptions">
      <add-card :rootMenu="rootMenu" @onAddCard="onAddCard" />
    </ty-plm-dialog>
    <add-dash-board
      v-model="addDashBoardModalVisible"
      :userRight="userRight"
      :modelType="modelType"
      :editData="instanceDashBoardDetail"
      @onHandleDashBoardSuccess="onHandleDashBoardSuccess"
    />
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
// 引入 产品 提供的组件
const panelToolbarLeft = tyRoot.tyGetMixinResource(
  'basic/business-modules/dash-board/components/panel-toolbar-left/panel-toolbar-left.vue'
);
const DragDashBoard = tyRoot.tyGetMixinResource(
  'basic/business-modules/dash-board/components/drag-dash-board/drag-dash-board.vue'
);
const AddCard = tyRoot.tyGetMixinResource('basic/business-modules/dash-board/components/add-card/add-card.vue');
const addDashBoard = tyRoot.tyGetMixinResource(
  'basic/business-modules/dash-board/components/add-dash-board/add-dash-board.vue'
);
const { useDashBoard } = tyRoot.tyGetExportResource(
  'basic/business-modules/dash-board/views/composables/dash-board.js'
);

defineOptions({
  name: 'dashBoard'
});

const props = defineProps(
  tyRoot.tyGetExportResource('basic/business-modules/dash-board/views/composables/dash-board.js').createProps()
);

const emit = defineEmits(
  tyRoot.tyGetExportResource('basic/business-modules/dash-board/views/composables/dash-board.js').createEmits()
);

const {
  isFullScreen,
  defaultDashBoard,
  onDashBoardChange,
  commondsMap,
  isEdit,
  userRight,
  buttonConfigs,
  doCommond,
  toAddCard,
  handleDashBoard,
  getDashBoardDetail,
  dialogVisible,
  addCardDialogOptions,
  rootMenu,
  onAddCard,
  addDashBoardModalVisible,
  modelType,
  instanceDashBoardDetail,
  onHandleDashBoardSuccess,
  editButtons,
  seeButtons,
  dashBoardDetail,
  dragBashBoardRef,
  panelToolbarLeftRef,
  getComponent
} = useDashBoard(props, emit);
</script>
<style lang="scss" scoped>
.dash-board-wraper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  font-family:
    verdana,
    'Helvetica Neue',
    PingFangSC-Regular,
    'PingFang SC',
    -apple-system,
    'system-ui',
    'Segoe UI',
    'Hiragino Sans GB',
    'Microsoft YaHei',
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif !important;
  $boxShowColor: #0000001a;
  ::v-deep .el-dialog__header {
    box-shadow: none !important;
  }
  .panel-tool-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    width: 100%;
    height: 39px;
    padding: 0 11px 0px 0;
    box-sizing: border-box;
    // background-color: $white_0;
    box-shadow: 0 5px 5px -3px $boxShowColor;
    .panel-toolbar-right {
      display: flex;
      align-items: center;
      ::v-deep .ty-base-dropdown {
        position: relative;
      }
      ::v-deep .have-left-line::after {
        position: absolute;
        top: calc(50% - 8px);
        left: -13px;
        width: 1px;
        height: 16px;
        content: '';
        background-color: #c4cbd0;
      }
      ::v-deep .icon-tianjia1 {
        position: relative;
      }
      ::v-deep .have-right-line::after {
        position: absolute;
        top: calc(50% - 8px);
        right: -78px;
        width: 1px;
        height: 16px;
        content: '';
        background-color: #c4cbd0;
      }
      ::v-deep .icon-operation-more {
        margin-right: 4px;
      }
    }
  }
  .dash-board-content {
    width: 100%;
    box-sizing: border-box;
    // background-color: $white_6;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
<style lang="scss">
::v-deep .base-dialog-context-without-footer {
  min-height: 40vh;
}
.container-dash-board-popover {
  margin-top: -10px;
  .el-popper__arrow {
    display: none;
  }
}
</style>
